<template>
	<!-- 电子校友卡 -->
	<view class="content">
		<!-- <image :src="imgURL+'/alumniCard.jpg'" style="width: 100%;"></image> -->
		<view class="card" :style="[{backgroundImage:'url('+imgURL+'/alumniCard.jpg)'}]">
			<view class="info" v-if="imgURL!=undefined">
				<view class="name">
					姓 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   名：<text class="small">{{person.name}}</text>
				</view>
				<view class="time" v-if="userInfo.wxNickName == 2">
					工作时间：<text class="small">{{person.work_date}}</text>
				</view>
				<view class="time" v-else>
					入学时间：<text class="small">{{person.enter_date}}</text>
				</view>
				<view class="depart" style="width: 420rpx;" v-if="userInfo.wxNickName == 2">
					<text style="width: 142rpx;">部 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门：</text><text class="small" style="">{{person.remark}}</text>
				</view>
				<view class="depart" style="width: 420rpx;" v-else>
					<text style="width: 142rpx;">学 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;院：</text><text class="small" style="">{{person.deptname}}</text>
				</view>
			</view>
			<view class="header">
				<image :src="userInfo.avatarName" class="header-img" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		getUserInfo
	} from "@api"
	
	export default {
		data() {
			return {
				userInfo:{},
				person:{},
				imgURL: this.$t.URL.staticImg,
				header:'https://thirdwx.qlogo.cn/mmopen/vi_32/m3uwK8yIjbSXKvcC6QRXdUa3zNxxXUQicK2GhzjOtn0z1Q2u96AvCSugAXKic8SibtGOm4uNPnju5X1ib6z543adZA/132',
			};
		},
		
		computed: {
			...mapState(['USER'])
		},
		
		methods:{
			...mapMutations(['setUserInfo', 'setToken']),
		},
		
		onLoad() {
			this.userInfo = this.USER.userInfo;
			console.log("userInfo", this.userInfo)
			this.getUserInfo(this.userInfo.id, this.userInfo.wxNickName);
		},
		methods: {
			getUserInfo(userId, wxNickName){
				let that = this;
				getUserInfo({
					userId:userId,
					wxNickName:wxNickName
				}).then(res=>{
					console.log("person",res[0]);
					that.person = res[0] ;
				}).catch(res=>{
					console.log("失败：",res);
				})
			},
		}

	}
</script>

<style lang="scss">
	.content {
		padding: 20rpx 20rpx;
	}

	.small {
		font-size: 1em;
	}

	.header-img {
		width: 188rpx;
		height: 232rpx;
		top: 172rpx;
		left: 59rpx;
		position: relative;
	}

	.card {
		display: flex;
		flex-direction: row;
		justify-content: left;
		width: 95%;
		height: 450rpx;
		background: no-repeat;
		background-size: 100%;
		font-size: 1.1em;
		color: #fcfdfd;
		position: absolute;
	}

	.info {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 240rpx;
		position: relative;
		top: 180rpx;
		left: 50rpx;
	}
	.depart{
		display: flex;
		flex-direction: row;
		justify-content: left;
	}
</style>
